<template>
	<view class="app app-bg">
		<view class="type">
			<view
				v-for="item in typeList"
				:key="item._id"
				:class="
					currentList.findIndex(data => data == item._id) >= 0 ? 'item-sel' : 'item-type'
				"
				@click="pickType(item)"
			>
				{{ item.name }}
			</view>
		</view>
		<view class="btn-box">
			<view>
				<text>已选</text>
				<text style="color: #23b453; font-size: 34rpx">{{ currentList.length }}</text>
				<text>项</text>
			</view>
			<view class="btn" @click="confirm">确认</view>
		</view>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			typeList: [],
			currentList: []
		}
	},
	onLoad(options) {
		const eventChannel = this.getOpenerEventChannel()
		eventChannel.on("sendTypeList", data => {
			this.currentList = data
		})
		this.init()
	},
	methods: {
		init() {
			this.typeList = [
				{ _id: 1, name: "上门按摩" },
				{ _id: 2, name: "助娱向导" }
			]
		},
		pickType(data) {
			if (this.currentList.findIndex(item => item == data._id) < 0) {
				if (this.currentList.length >= 5) {
					return
				}
				this.currentList.push(data._id)
			} else {
				this.currentList.splice(this.currentList.indexOf(data._id), 1)
			}
		},
		confirm() {
			let that = this
			let list = []
			that.currentList.map(item => {
				list.push(that.typeList.find(e => e._id == item))
			})
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.emit("getType", list)
			vk.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	background-color: #fff;
	padding: 20rpx 10rpx;
}
.type {
	display: flex;
	flex-wrap: wrap;
	.item-type {
		width: 196rpx;
		height: 72rpx;
		background: #f2f3f6;
		opacity: 1;
		border-radius: 4rpx;
		text-align: center;
		line-height: 72rpx;
		margin: 10rpx 24rpx;
	}
	.item-sel {
		width: 196rpx;
		height: 72rpx;
		background: #23b453;
		opacity: 1;
		border-radius: 4rpx;
		color: #fff;
		line-height: 72rpx;
		text-align: center;
		margin: 10rpx 24rpx;
	}
}
.btn-box {
	display: flex;
	width: 100%;
	height: 108rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0rpx -6rpx 26rpx rgba(0, 0, 0, 0.08);
	opacity: 1;
	position: fixed;
	bottom: 0;
	left: 0;
	align-items: center;
	padding-left: 24rpx;
	.btn {
		width: 490rpx;
		height: 76rpx;
		background: #23b453;
		opacity: 1;
		border-radius: 50rpx;
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		margin-left: 86rpx;
	}
}
</style>
